<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Promise理解</title>
</head>

<body>
    <script>
        // promise 是异步编程一种解决方案 解决多个串联的异步操作形成的回调地狱 
        // 三种状态:pending(进行中)  fulfilled(已成功)  rejected(已失败)
        // 特点: 状态不受外界的影响,只有异步操作的结果,决定当前是哪一种状态/一旦状态发生改变就不会再变   (pending ---> fulfilled, pending---> rejected)
        // 用法: Promise是一个构造函数, 用来生成Promise实例
        // Promise构造函数接收一个函数作为参数
        // Promise实例方法：
        // .then() 当实例发生改变的时候回调函数,返回一个新的Promise实例
        // .finally()用来指定不管Promise对象状态最后如何,都会执行的操作
        // .all()用于将多个请求合并在一起,包装成一个Promise实例 参数可以不是数组 但必须是iterator接口 状态是所有的请求都成功 all才会返回成功
        //  有一个失败,那么就是失败,这个时候失败实例的返回值,会传递给all的回调函数  如果作为参数的实例,自己定义了catch方法 那么它一旦rejected 不会触发all的catch方法
        // .allSettled 方法接受一组数组形式的 Promise 实例作为参数 只有等到所有这些参数实例都返回结果，不管是fulfilled还是rejected，包装实例才会结束
        // .race() 用于请求多个当 谁先改变状态就获取对应的内容 不管成功与否
        const P = new Promise(function (resolve, reject) {
            setTimeout(() => {
                const timer = new Date().getTime()
                if (timer % 2 === 0) {
                    reject('成功')
                } else {
                    reject('失败')
                }
            }, 1000)

        })

        P.then((res, req) => { 
            console.log(res, '1111111');
        }).finally((res) => {
            console.log('成功失败都走');
        })

        //红绿灯案例
        function lamp() {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    console.log('绿灯');
                    resolve('黄灯')
                }, 2000)
            })
        }
        lamp().then(res => {
            return new Promise((resolve, reject) => {

                setTimeout(() => {
                    console.log(res)
                    resolve('红灯')
                }, 3000)
            })
        }).then((res) => {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    console.log(res);
                }, 5000)
            })
        })

    </script>
</body>

</html>
